<template>
	<view class="gt-admin-content col">
		<view style="padding: 10px;">
			<table class="gt-table" align="center">
				<thead>
					<tr>
						<td v-if="table.batchSelect" width="50">
							<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
						</td>
						<td>序号</td>
						<td v-for="(column,key) in table.columns" :key="key">{{ column.label }}</td>
					</tr>
				</thead>
				<tbody v-if="!list || list.length == 0">
					<tr class="gt-table-tr">
						<td :colspan="table.columns && table.columns.length + 1">
							<view class="t-center c-secondary pd-15">无数据</view>
						</td>
					</tr>
				</tbody>

				<tbody v-else v-for="(row,rowIndex) in list" :key="rowIndex">
					<tr class="gt-table-tr"
						:style="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? '' : 'background-color:rgba(0, 150, 255, 0.12)'">
						<td v-if="table.batchSelect">
							<checkbox
								:checked="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? false : true "
								@click="selectCheckBox(rowIndex)"></checkbox>
						</td>
						<td>#{{ rowIndex + 1 }}</td>
						<td v-for="(column,columnIndex) in table.columns" :key="columnIndex">
							<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
								<!-- 插槽 -->
								<view v-if="column.type == 'custom'" @click="clickCell(column,row,rowIndex)">
									<slot name="custom" :row="row" :column="column" :rowIndex="rowIndex"></slot>
								</view>
								<!-- 自定义html方法 -->
								<view v-else-if="column.type == 'custom-html'" @click="clickCell(column,row,rowIndex)">
									<view v-if="column.value" v-html="column.value(row,rowIndex,$fun.getThis())"></view>
								</view>
								<!-- html -->
								<view v-else-if="column.type == 'html'" v-html="row[column.field]"
									@click="clickCell(item,row,rowIndex)"></view>
								<!-- ,间隔字符串 -->
								<view v-else-if="column.type == 'array'" @click="clickCell(column,row,rowIndex)">
									<view class="row" v-if="row[column.field]">
										<view v-for="(arrItem,arrIndex) in row[column.field].split(',')" :key="arrIndex" class="tag-info mr-10 mb-10">{{ arrItem }}</view>
									</view>
								</view>
								<!-- 时间 -->
								<view v-else-if="column.type == 'date'" @click="clickCell(column,row,rowIndex)">
									{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
								</view>
								<view v-else-if="column.type == 'datetime'" @click="clickCell(column,row,rowIndex)">
									{{ $tools.timeToDate(row[column.field],'Y-M-D h:m:s')  }}
								</view>
								<!-- 图片 -->
								<view
									v-else-if=" ['img','uploader','upload'].indexOf(column.type) != -1 && row[column.field] != ''"
									class="row pointer" @click="clickCell(column,row,rowIndex)">
									<image :class="column.size?column.size:'w-h-30'" class=" b-r"
										:src="$fun.imgUrl(row[column.field])"
										@click="$fun.showImgs(row[column.field].split(','))"></image>
								</view>
								<!-- 枚举 -->
								<view v-else-if="column.type == 'select'" class="row-nowrap align-center"
									@click="clickCell(column,row,rowIndex)">
									<uni-icons
										v-if="column.color && row[column.field] != undefined && column.color[row[column.field]]"
										:type="column.color[row[column.field]].icon || 'smallcircle-filled'"
										:color="column.color[row[column.field]].color || '#aaa' " size="16"
										class="mr-5"></uni-icons>
									<view v-if="column.list"
										:style="column.color && row[column.field] != undefined && column.color[row[column.field]]  ? column.color[row[column.field]] : '' ">
										<text selectable>{{ $tools.getListVal(column.list,row[column.field])}}</text>
									</view>
									<view v-else-if="selectList[column.field]"
										:style="column.color && row[column.field] != undefined && column.color[row[column.field]]  ? column.color[row[column.field]] : '' ">
										<text
											selectable>{{ $tools.getListVal(selectList[column.field],row[column.field])}}</text>
									</view>
								</view>
								<!-- 复制文字 -->
								<view v-else-if="column.type == 'copy_text'" @click="clickCell(column,row,rowIndex)">
									<text class="pointer" @click="$fun.copy(row[column.field])">
										<text class="">{{row[column.field]}}</text>
										<text class="iconfont icon-copy ml-5" style="font-size: 10px;"></text>
									</text>
								</view>
								<!-- 按钮 -->
								<view v-else-if="column.type == 'btn'" @click="clickCell(column,row,rowIndex)">
									<view class="row" v-for="(btnItems,btnKey) in column.btnList" :key="btnKey"
										v-if=" table.status == btnItems.status">
										<view v-for="(btn,btnIndex) in btnItems.list" :key="btnIndex">
											<gt-btn v-if="btn.url" :name="btn.name" :iconClass="btn.iconClass"
												:class="btn.class" :postUrl="btn.url(row)" :confirmText="'您确认此操作？'"
												@callBack="rowCallBack">
											</gt-btn>
											<view v-else @click="update(btn.label,row)">
												<gt-btn :name="btn.name" :iconClass="btn.iconClass" :class="btn.class">
												</gt-btn>
											</view>
										</view>
									</view>
								</view>
								<!-- 自定义Value -->
								<view v-else-if="column.value" @click="clickCell(column,row,rowIndex)">
									{{column.value(row,rowIndex,row[column.field])}}
								</view>

								<!-- 操作 -->
								<view v-else-if="column.type == 'handle'" class="row-nowrap">
									<view v-for="(item,itemIndex) in column.items" :key="itemIndex"
										v-if="handleIsShow(item,row)" :style="column.style || ''">
										<view v-if="item.type == 'popup'"
											:class="item.class || 'btn btn-link btn-xs mr-10'" :style="item.style"
											@click="clickBack(item,row)">
											{{item.label}}
										</view>
										<view v-else-if="item.type == 'urlPost'"
											:class="item.class || 'btn btn-link btn-xs mr-10'" :style="item.style"
											@click="clickBack(item,row)">
											{{item.label}}
										</view>
										<view v-else class="btn btn-xs mr-10" @click="clickCell(item,row,rowIndex)">
											{{item.label}}</view>
									</view>
								</view>
								<!-- 文字 -->
								<view v-else @click="clickCell(column,row,rowIndex)"
									:class="column.click ? 'gt-table-td-click' : ''">
									<text :selectable="column.click ? false : true">{{ row[column.field] }}</text>
								</view>
							</slot>
						</td>
					</tr>
					<slot name="tableChild" :row="row" :rowIndex="rowIndex"></slot>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-table",
		props: {
			table: {
				type: [Array, Object],
				default: function() {
					return {
						columns: [],
					};
				}
			},
			list: {
				type: [Array],
				default: function() {
					return [];
				}
			},
			selectList: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			}
		},
		created() {},
		data() {
			return {
				batchSelectIndexList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
				searchPage: ''
			}
		},
		computed: {
			selectAllCheckbox() {
				if (this.list && this.list.length != 0 && this.batchSelectIndexList && this.batchSelectIndexList.length ==
					this.list.length) {
					return true;
				}
				return false;
			}
		},
		methods: {
			clickCell(column, row, rowIndex) {
				if (column.click) {
					column.click(row, rowIndex, this.$fun.getThis())
				}
				this.$emit('clickCell', column, row, rowIndex)
			},
			clickBack(item, row) {
				this.$emit('clickBack', item, row);
			},
			handleIsShow(item, row) {
				if (item.isShow && typeof item.isShow == 'function') {
					return item.isShow(row);
				}
				return true;
			},
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				this.$emit('selectCheckBox', this.batchSelectIndexList)
			},
			selectParentCheckBox() {
				if (this.list.length != 0 && this.batchSelectIndexList.length == this.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in this.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				this.$emit('selectCheckBox', this.batchSelectIndexList)
			},
			changePageInfo(info) {
				this.batchSelectIndexList = [];
				this.$emit('changePageInfo', {
					page: info.page || this.table.pageInfo.page || 1,
					limit: info.limit || this.table.pageInfo.limit || 10,
				});
			},
			changePageLimit(e) {
				this.changePageInfo({
					page: 1,
					limit: e || 10
				})
			},
			// 分页获取列表
			pagination(e) {
				this.changePageInfo({
					page: e.current
				})
			},
			// 分页跳转
			skipPage() {
				let skipPage = parseInt(this.searchPage);
				this.changePageInfo({
					page: skipPage
				})
				this.searchPage = '';
			},
			rowCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label, row) {
				let obj = {
					label: label,
					row: row
				}
				this.$emit('update', obj)
			},
			getSelectColor(list, key, keyName = 'key', valueName = 'color') {
				for (let i in list) {
					let row = list[i];
					if (row[keyName] == key) {
						return row[valueName];
					}
				}
				return '';
			}
		}
	}
</script>

<style>
	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 12px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.gt-table-td-click {
		color: #409EFF;
		cursor: pointer;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>